<template>
	<view>
		<uni-popup ref="addpopup" type="bottom" @touchmove.stop.prevent="movehandle" :is-mask-click="false">
			<scroll-view class="addpopup" scroll-y="true" catchtouchmove="true">
				<view class="content">
					<!-- //一级目录 -->
					<view class="Level-1">
						<view class="level-1-select" v-for="(item,index) in level_1" :key="index"
							@click="handleClick(index)">
							<uni-icons class="level-1-icon" :class="{active:index ===activeIndex}" :type="item.icon"
								size="40"></uni-icons>
							<view class="title">{{item.title}}</view>
						</view>
					</view>
					<view class="level-2" v-if="true">
						<view class="level-2-select" v-for="(item,index) in level_2">
							<uni-icons class="level-2-icon" :type="item.icon" size="30"></uni-icons>
							<view class="title">{{item.title}}</view>
						</view>
					</view>
				</view>
				<view class="moneyInfo">
					<view class="label">{{flag==0?"收款":"支出"}}方式：</view>
					<view class="incn-type">
						<view v-for="(item ,index) in iconType" :key="index" @click="handleSelIcon(index)">
							<image style=" width: 60rpx;height: 60rpx; color: aqua;"
								:src="selIcon==index?item.path1:item.path2" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
				<view class="moneyInfo">
					<view class="label">{{flag==0?"收入":"支出"}}金额：</view>
					<input class="money" type="number" focus="true" placeholder="花费金额" :value="money">
				</view>
				<view class="moneyInfo">
					<view class="label">备注信息：</view>
					<input class="money" type="text" focus="true" placeholder="备注信息" :value="moneyInfo">
				</view>
				<view class="footer">
					<view class="btn">
						<view class="btnitem" @click="oncancel">取消</view>
						<view class="btnitem submit" @click="onsubmit">确定</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref, defineProps } from 'vue'
	const addpopup = ref(null)
	const activeIndex = ref()
	//一级列表
	const level_1 = ref([])
	const level_2 = ref([
		{ icon: 'contact', title: "购物消费" },
		{ icon: 'contact', title: "食品餐饮" },
		{ icon: 'contact', title: "出行交通" },
		{ icon: 'contact', title: "休闲娱乐" },
		{ icon: 'contact', title: "居家生活" },
		{ icon: 'contact', title: "送礼人情" },
		{ icon: 'contact', title: "健康医疗" },
		{ icon: 'contact', title: "其他" },

	])
	const moneyInfo = ref()
	const money = ref()
	const flag = ref()
	const selIcon = ref()
	const iconType = ref([{
			path1: "../../static/iconType/weixin.png",
			path2: "../../static/iconType/weixin (2).png",
			value: 'weixin'
		},
		{
			path1: "../../static/iconType/zhifubaozhifu.png",
			path2: "../../static/iconType/zhifubaozhifu (2).png",
			value: 'zhifubao'
		},
		{
			path1: "../../static/iconType/yinhangqia.png",
			path2: "../../static/iconType/yinhangqia (2).png",
			value: 'yinhangka'
		},
		{ path1: "../../static/iconType/qita.png", path2: "../../static/iconType/qita (2).png", value: 'qita' }
	])

	const openpopup = (dataList, index) => {
		// console.log('e---------wen', e)
		level_1.value = dataList
		flag.value = index
		addpopup.value.open()
	}
	const handleSelIcon = (index) => {
		selIcon.value = index
		console.log('22222', selIcon.value)
	}
	const handleClick = (index) => {
		activeIndex.value = index
	}
	const oncancel = () => {
		addpopup.value.close()
	}
	//提交订单
	const onsubmit = () => {
		//拿接口
		//关闭popup
		addpopup.value.close()
	}
	defineExpose({
		openpopup
	})
</script>

<style lang="scss" scoped>
	.addpopup {
		height: 70vh;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 30rpx;
		box-sizing: border-box;

		.active {
			background-color: #3fa98d30;

		}

		.content {
			box-sizing: border-box;
			padding-bottom: 15rpx;
			border: 1px solid #ccc;
			border-radius: 20rpx;

			.Level-1 {
				// background-color: #3fa98d;
				box-sizing: border-box;
				padding: 20rpx;
				// margin-top: 10rpx;
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				gap: 15rpx;
				// flex-wrap: wrap;
				// display: flex;
				// justify-content: left;

				.title {
					color: #666666;
					font-size: 24rpx;
				}

				.level-1-select {
					// margin-left: 30rpx;
					// margin-top: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					.level-1-icon {
						display: flex;
						justify-content: center;
						align-items: center;
						// background-color: #a3d5c9;
						border-radius: 50rpx;
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.level-2 {

				margin: 0rpx 30rpx;
				background-color: #f5f5f5;
				border-radius: 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
				// display: flex;
				// flex-wrap: wrap;
				// padding-bottom: 20rpx;
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 10rpx;

				.level-2-select {
					display: flex;
					flex-direction: column;
					align-items: center;
					// background-color: #666666;

					.title {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}

		.moneyInfo {

			padding: 30rpx;
			border: 1rpx solid #ccc;
			margin-top: 20rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: left;
			align-items: center;

			.label {
				width: 28%;
				// background-color: pink;
				height: 60rpx;
				display: flex;
				align-items: center;
				font-weight: 700;
			}

			.money {
				border-bottom: #3fa98d 1rpx solid;
				height: 60rpx;
				width: 72%;
			}

			.incn-type {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 60rpx;
				width: 450rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				// border: 1rpx solid #ccc;
			}

		}

		.footer {
			height: 120rpx;
			width: 100%;
			// background-color: #3fa98d;
			// position: absolute;
			bottom: 20rpx;
			left: 0;

			.btn {
				margin: 10rpx;
				padding: 20rpx 100rpx;
				// height: 100rpx;
				// padding: 30rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;
				font-weight: 700;

				.btnitem {
					border: 1rpx solid #f5f5f5;
					background-color: #f5f5f5;
					border-radius: 40rpx;
					width: 200rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.submit {
					background-color: #3fa98d;
					color: #fff;
				}

			}
		}
	}
</style>